Building and Testing Prototypes.
Portfolio.
Name: Andreea Speianu
Student ID: 22054642
Student ID: 22054642
Assignment 1.1 | Fitness Watch
A.
The wearable device in my case is a watch, because I consider the watch to be a comfortable accessory to wear while running. First of all, I set the dimensions of the screen and its shape. I chose it to be square with a width of 41 and a length of 45mm. When I started the designing, I took into account all the details that we had to include in the prototype. I didn't include too many extra details, with the exception of heart rate. One of my main goals was to not include too much text, and make the interface intuitive at the same time. I assumed that in order to make the interface intuitive it’s a good idea to use suggestive colors. They will help the user understand by association what the purpose of a button is. For example, I used green for the start button and red for the stop button.
The process:
B.
I improvised a cardboard watch so I could start testing my prototype. I chose 5 users from whom I expected constructive feedback and followed the testing protocol. First, I asked them to stand up and imagine that they are running. I then asked them to do two or three tasks, such as: "Start the run and check your current speed" or "Check how many calories you burned last month." and think out loud. During testing, I did not intervene with suggestions or comments, but let users follow the steps to achieve their goal on their own. Finally, I used the I Like, I Wish, What If method to collect feedback on my prototype.
C.
Immediately after the first user, I understood that I limited myself to what seemed correct and comfortable to me. After processing the test results, I came to some conclusions.
What the great majority appreciated is the fact that the interface looks nice, the screens are not loaded with text and the fonts are big enough. I also confirmed my assumption that colors make the interface more intuitive. According to tester 1: "I like that you used colors to indicate the start and stop, it feels familiar."
Of course, I received many suggestions for improvement. From everything I was told, I came to 3 main conclusions, the first being related to the flow and efficiency of the app. The way to navigate (by swiping) is not the most convenient one while running. According to tester 3: "The stats are hidden too deep in the menu." I also realized that without starting the run, users cannot check their statistics or heartbeat. The second conclusion is related to the main screen. The testers were not sure what to do when seeing it, so there was no clear indicator for the next step. Also, I was suggested to add more extra information on it. The third conclusion is related to the statistics for each week, which is perhaps not the most clearly stated (weeks are expressed by numbers).
D.
I changed what I could change in my current prototype. First of all, I added a button that clearly indicates "swipe up" on the main screen and I limited the number of pages. Also, instead of assigning numbers to weeks, I marked them with "this week/last week".
Iteration
Assignment 1.2 | Sounds for Watch
A.
For this assignment I created audio feedback for the core functionalities of a fitness tracker application. This involved making 6 sounds that capture the essence of each function. I also experimented with vocal sketching to come up with creative sounds but I decided to stick with GarageBand in the end. If I had the opportunity to, I would have also synthesized my own sounds, but unfortunately I didn’t.
B.
Start run
The sound signifies the start of running and it is effective in providing the user with a prompt to begin. Moreover, the volume of the sound gradually increases.
Stop run
This sound indicates the end of the running, with the volume slowly decreasing. It notifies the user that the run has finished.
Feedback for running slower
I used some of the lower notes of the piano to create a heavier and more deliberate sound which suggests that your speed decreased.
Feedback for running faster
I think this piano sound fits the feedback for running faster as the melody is quick and has an energetic tempo.
Halfway there
This sound is upbeat and encouraging to inspire the user to keep going and complete the run.
Exercise complete
The sound for exercise complete is upbeat and energizing as it should be something that motivates you to move and keep going to the next exercise.
C.
Usability Test Protocol
Research Question: How successful is the audio feedback for the running application?
Characteristics of Users:
1. Age range: any
2. Experience level with sounds: intermediate or above
3. Familiarity with running applications: familiar
4. Comfort level with technology: comfortable
Materials: pen, paper, camera, running application prototype with audio feedback, headphones.
Introduction:
Welcome to my research study! I am looking into how successful audio feedback is for my running application. You will be asked to use the running application prototype with headphones to complete a few tasks. Please let me know if you have any questions.
Tasks:
1. Start the running and observe how the audio feedback changes as you improvise running.
2. During the activity, pay attention to the audio feedback that you are receiving and let me know what you think about it.
3. Associate the sound with an emotion: panic, courage, stress, confidence etc.
Feedback Questions:
1. How intuitive was the audio feedback in the running application? Match the each sound separately with one function on the list.
2. Do you think the audio feedback improved your overall experience with the running application?
3.Did you find the audio feedback helpful or distracting during the activity?
D.
The majority of the testers had difficulty when matching the sounds to their corresponding function. Particularly, the start of the run sound was confused with the exercise complete sound. Also, based on the feedback received, the halfway there sound did not match the sound family of the piano notes. In response to this, I decided to create a new sound for the halfway there that matches the sound family better.
Assignment 2.1 | Tripp3r App Lo-Fi
A.
In this assignment I was challenged to create a travel mobile application with Tripper, a rebranded version of the Randstad Rail. The first step was to create a low fidelity wireframe of the application, taking into account all functional requirements. In my case it is a rather mid-fidelity wireframe, because it has more details included, like accurate spacing, headlines and buttons. Reading all the requirements, I sketched really quickly and inaccurately what I have in mind on paper, so that the ideas start to take shape. I began to design my wireframe using Adobe XD.
B.
I tested my wireframe with 5 fellow students in order to receive constructive feedback. I aim to find out if my prototype is intuitive enough, and if not, what issues do my users meet when completing the tasks. I recorded the feedback using my smartphone.
I used the following protocol to test my prototype:
Introduction
I’d like to thank you for taking the time to participate in this prototype testing for the new Tripper travel planner application.
The purpose of the testing is to understand how users interact with the wireframe, and to provide feedback and suggestions on how to improve the usability of the interface.
I want to encourage you to express your thoughts and feelings out loud. I’m going to record the process, so that I can use the data to update and improve the wireframe.
Please let me know if that is alright with you!
Creating Tasks
Please select your starting point and your destination, start your journey and select the departure and arrival desired time.
After choosing the route, download the PDF version of the itinerary. Now you can go back to the main screen.
Go to the map with the 5 given lines and check line C individually.
Please find out some more information about a particular landmark on the map.
Check the current weather and the amount of CO2 you have saved traveling with Tripper.
Feedback
To receive good and well structured feedback I used the ‘I like/I wish/I wonder’ template.
Follow-up questions:
Were there any moments you struggled achieving the goal?
Were the buttons suggestive enough to complete a certain task?
On a scale from 1 to 10, how would you rate the efficiency of the application?
Is there something you find unnecessary in this wireframe?
Debriefing
Thank you for your participation in the testing of my product. Your feedback and insights are very valuable in helping me improve my current prototype.
C.
The test results were very different but very useful at the same time.
After analyzing the information I came to some conclusions. One of them is that the design is both simple and understandable, the interface doesn’t feel condensed, it is easy to read and self explanatory (with some exceptions). However, I realized that the efficiency of my application is not the best. The amount of clicks to go back to the home screen is supposed to be minimal. User 3 mentioned: “I wonder if there could be a home button that leads you straight to the home page”. Also, each of the five users struggled changing the time of the departure and arrival. The navigation was not clear in this sense and also confusing for my testers. There’s no button suggesting you should press it to change the departure/ arrival desired time. Also, the icons I’ve chosen are not intuitive, as I thought before the testing. People had to think twice before choosing one of the options.
D.
I firstly changed the navigation bar, I added the home button to go to the main screen with a simple click and also the icons are more clear and easier to understand. I also changed the way the user can select the departure/arrival time (which is more efficient now) and the interface of the forecast, as the previous example was inspired from the Apple weather app.
Assignment 2.2 | Tripp3r App Hi-Fi
A.
This week, I created an interactive prototype for Tripp3r- the public transportation journey planner. The prototype is based on the wireframes I had created in the prior assignment. The wireframes served as a determinant for the content, structure, navigation, and interactive components that were incorporated into the prototype.
For the prototype of the travel app, I used a color palette that was inspired by the logo, which was based on the color yellow. This color was used throughout the app to create a consistent look and feel. I used round corners on buttons and shapes to give the design a playful, friendly overall look. Additionally, I used a minimalist style to ensure that the user interface is intuitive and easy to use. To further improve the user experience, I used familiar elements such as the home button to make navigation easier and an indicator for the user to know on which page they are at the moment. Finally, I added some animation to make the app more engaging and enjoyable to use.
B.
Introduction for the heuristic evaluation:
Tripp3r is a public transport app which is designed to help users get around easily and conveniently in their city. It provides real-time information about bus and train schedules, routes, and prices, as well as real-time weather updates to help users make the most of their trips.
I invite you to participate in a heuristic evaluation of this prototype. During the evaluation, you will be asked to assess the usability of the app and provide feedback and recommendations. Your evaluation will help me identify areas of improvement in my application.
Tasks:
First I want to ensure that the user interface elements are clearly labeled, have consistent styling, and are intuitive to use. Task: Without using the navigation bar, tell me what you expect to see when pressing on each of the 4 buttons.
Next I want to ensure that the navigation works efficiently meaning that the navigation between screens is consistent and that users can easily access all information they need. Task: Use the navigation bar to move from one page to another and rate from 1 to 5 how easy it is to use.
I also want to test the route planning, checking that the route planning functionality is working properly and that users can quickly and easily plan their journey. Task: Select the start point, destination and change the time of both departure and arrival of your next journey.
Feedback:
All the tasks being finalized, please rate the 10 Jakob’s heuristics on a scale from 0 to 4- where 0 means no usability problem and 4 is a usability catastrophe.
C.
Analysis of the data revealed a strong appreciation for the aesthetic and minimalist design heuristic. The testers confirmed that the design was intuitive and visually appealing, with one user commenting that “the menu bar at the bottom is very different but clear and pretty”. Despite this, the results of the heuristic evaluation highlighted visibility of system status as the most violated heuristic. The testers found it difficult to select departure and arrival times, prompting the suggestion to relocate the options to the primary screen, or to at least center them to increase efficiency.
Another issue the tasters took into account was related to the heuristic consistency and standards, noticing that after selecting the arrival time, the screen didn’t change to “arrival time selected”.
This is how the changes I made look like:
D.
Testing the prototype went well overall, as I was able to get feedback from multiple users and identify areas of improvement.
One thing that could have been done better was to ensure that the prototype was more user-friendly. The prototype was somewhat difficult to navigate, and I could have provided clearer instructions to users. Additionally, I could have provided more interactive features in the prototype, such as clickable buttons.
Assignment 3.1 | Exploratory Prototyping
Introduction
For me personally the text on an interface plays a very big role, that’s why I chose to test the following topic: "Typeface size, case, and width affects the speed of identifying words." I’m usually bothered when I don’t see consistency in text or a clear hierarchy. I think that different elements should be organized in a way that draws the user's attention to the most important information first. This can be done by using larger font sizes and bolder typefaces for titles and headers, and smaller font sizes and lighter typefaces for body text. This helps to create a clear hierarchy and makes it easier for users to identify the most important information quickly.
Test results
People testing prototype B said that they think the text structure looks good and the font weight matches the information’s importance. However, the test results say something different. The average for prototype A for the 5 testers is 2,4 sec, while the average for prototype B is 3 seconds. Even though the gap is not big, it does make the difference. I noticed that when testing prototype B and focusing on the numbers, people tended to get a bit closer to the screen and focus a bit more.
Initial insights and outcomes
Initially I thought that prototype B would be more of a challenge for people to test, as there’s no consistency is fonts and no hierarchy, the numbers on the interface being really small and thin. It turned out that some people found it perfectly fine. Even though some people and designers do opt for chaotic styles in terms of fonts and text, I still think that a clear hierarchy must be respected and the text must be properly appreciated depending on its importance.
Assignment 4.1 | The Wizard of Oz
Concept:
Our concept was to create a playful quiz with 21 questions, meaning 7 questions per tester. All 3 testers were supposed to answer the questions correctly in a short amount of time (10 seconds) by stepping on it. The one who gets the most questions correct, wins.
Scenario:
We expected the users to be immersed in the experience as people usually feel knowledgeable and valued when getting the correct answer to questions. The UX engagement factor we tested was activation. We tried to understand how to make people feel more entertained during the experience and also what triggers their interest in taking part in the challenge.
Input:
We used sounds to make the experience more engaging, one sound for the correct answer and one for the wrong one. The countdown was also an intimidating voice counting from ten to zero, which puts more pressure on the user and perhaps, makes them focus more on the question in front of them.
The Wizard Input was making sure to synchronize the changing of the artboard with the correct sounds (correct/wrong) as smoothly as possible.
Conclusion:
Some conclusions I made is that the users need to be rewarded in order to feel more motivated to take up a challenge and more immersed in the process. That gives them a real sense of competition even though the prize is nothing more than a chocolate. I think this is something we should have thought more about, as people can be very easily convinced to do things when something is waiting for them at the end. What was a bit challenging during the testing was placing the projector in a way that it faces the floor.
Overall, I think the Wizard of Oz technique is an effective way to build a prototype in a relatively short amount of time. It requires minimal resources and provides immediate feedback from users that can be used to improve the system. This process helped me understand what users’ needs are and how to make the quiz more engaging.
Final Reflection
The course “Build and Test Prototypes” has been a great learning experience for me. During the course, I had the opportunity to work on six different assignments, which taught me the importance of testing a product.
The first assignment taught me how fast it can be to prototype something just using some paper. I realized that paper prototypes save you a lot of time and offer you the opportunity to iterate as many times as needed. I also had my first experience creating sounds for an application, which I found fun and challenging at the same time. The third assignment taught me the importance of creating a prototype that is easy to use and understand. I learned how to create a wireframe that is intuitive and helpful to users. After this, I learned how to design a prototype that is visually appealing and user friendly using the wireframes as a guideline. The Exploratory Prototype was something very new to me, as I never tried A/B testing before. It taught me how to create a prototype that can effectively conduct user research and provide useful insights. Lastly but not least, the one assignment that made me very excited was building and testing a Wizard of Oz Prototype. It was not only fun but also insightful.
Overall, this course has been a great learning experience for me. I have learned the importance of testing a product and creating multiple iterations before releasing it to the public. I am confident that the skills I have gained from this course will help me create better products in the future.
